import React, { useEffect,useState } from 'react';
import './DoctorAdd.scss'
import {useNavigate} from 'react-router-dom'
import {Form,Col,Input,Avatar,Button,Select, message} from 'antd'
import {HomeFilled} from '@ant-design/icons'
import {useLocation} from 'react-router-dom'
import {addDoctor,getOfOrg,getOfTeam,getDoctorRole,patchDoctor,getOrglist,getMngtable} from '../../../../api/Datas'
interface Props{

}
function DoctorAdd(props:Props) {
    const { TextArea } = Input;
    const [form] = Form.useForm()
    var navigate = useNavigate()
    var [option, setOption] = useState([]) //所属机构
    var [ofteam, setOfteam] = useState([]) //所属团队
    var [role, setRole] = useState([]) //医生角色
    // var [username, setUsername] = useState()//登陆的用户名
    var location = useLocation()
    useEffect(()=>{
        getManagerList()
        getteamlist()
        doctorRole()
        // setUsername(JSON.parse(localStorage.getItem('user')+'').name)
        if(location.state.type=='handle'){
            console.log(location.state.record)
            form.setFieldsValue(location.state.record)
        }
    },[])
     // 获取所属机构下拉框
     var getManagerList = async()=>{
        var res = await getOrglist()
        var arr = res.data.data.map((item: any) => {
            return { value: item.mechanismId, label: item.mechanismName }
        })
        setOption(arr)
    }
    // 获取所属团队列表
    var getteamlist = async () => {
        var res = await getMngtable()
        console.log(res)
        var arr = res.data.data[0].map((item: any) => {
            return { value: item.teamId, label: item.teamName }
        })
        setOfteam(arr)
    }

    // 获取医生角色
    var doctorRole = async()=>{
        var res = await getDoctorRole()
        var arr = res.data.map((item: any) => {
            return { value: item.id, label: item.name }
        })
        setRole(arr)
    }
     // 提交表单
     const onFinish = async (values: any) => {
        if(location.state.type=='add'){
             var res =await addDoctor({...values,doctorImg:'https://cdn7.axureshop.com/demo/1881228/images/%E5%8C%BB%E7%94%9F%E7%AE%A1%E7%90%86/u6512.png',doctorState:true})
             if(res.data.code == 200){
                message.success({content:'新增成功'})
                navigate(-1)
             }
            
        }else if(location.state.type=='handle'){
            var res1 = await patchDoctor({...values,doctorImg:'https://cdn7.axureshop.com/demo/1881228/images/%E5%8C%BB%E7%94%9F%E7%AE%A1%E7%90%86/u6512.png',doctorState:location.state.record.doctorState})
            if(res1.data.code==200){
                message.success({content:'修改成功'})
                navigate(-1)
            }
            
        }
    };
     // 提交失败
     const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    // 下拉框内容发生变化
    var selectChange = async()=>{
        
    }
    return (
        <div className='doctoradd'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>
                    {
                        location.state.type=='add'?'新增医生信息':'编辑医生信息'
                    }
                </h3>
            </div>
            <h4>医生信息</h4>
            <Form
                form = {form}
                {...layout}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="医生编号"
                        name="doctorId"
                    >
                        {
                            location.state.type=='add'?<span className='jsonid'>自动生成</span>:<span className='jsonid'>{location.state.record.doctorId}</span>
                        }
                        
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="账号"
                        name="doctorTel"
                        rules={[{ required: true, message: '请填写机构名称' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生头像"
                        name="doctorImg"
                    >
                        {/* <Input type='file' onChange={onFileChange} /> */}
                        <div className="avatorbox">

                            <Avatar shape="square" icon={<HomeFilled />} />
                            <a >+点击上传</a>
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生姓名"
                        name="doctorName"
                        rules={[{ required: true,message: '请填写联系人姓名' }]}
                    >
                        <Input placeholder='请输入医生姓名' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="医生角色"
                        name="roleId"
                        rules={[{ required: true,message: '请选择医生角色' }]}
                    >
                         <Select
                            allowClear
                            placeholder='请选择医生角色'
                            style={{ width: 200 }}
                            onChange={selectChange}
                            options={role}
                        />
                    </Form.Item>
                </Col>
                <Col span={8}>
                <Form.Item
                        label="登陆密码"
                        name="doctorPassword"
                        rules={[{required: true,message: '请设置密码' }]}
                    >
                        <Input.Password placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                <Form.Item
                        label="所属机构"
                        name="mechanismId"
                        rules={[{required: true,message: '请选择所属机构' }]}
                    >
                        <Select
                            allowClear
                            placeholder='请选择所属机构'
                            style={{ width: 200 }}
                            onChange={selectChange}
                            options={option}
                        />
                    </Form.Item>
                </Col>
                <Col span={8}>
                <Form.Item
                        label="所属团队"
                        name="teamId"
                        rules={[{required: true,message: '请选择所属团队' }]}
                    >
                        <Select
                            allowClear
                            placeholder='请选择所属团队'
                            style={{ width: 200 }}
                            onChange={selectChange}
                            options={ofteam}
                        />
                    </Form.Item>
                </Col>
                <Col span={8}></Col>
                <Col span={8}>
                    <Form.Item
                        label="医生简介"
                        name="doctorIntroduce"
                        rules={[{ message: '请填写机构地址' }]}
                    >
                        <TextArea rows={4} placeholder='请输入简介' />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>
                <Col span={8}>
                    <Form.Item
                        label="医生擅长"
                        name="doctorGoodat"
                        rules={[{ message: '请填写擅长领域' }]}
                    >
                        <TextArea rows={4} placeholder='请输入擅长领域' />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button onClick={()=>{navigate(-1)}}>返回</Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default DoctorAdd;